<template>
  <div class="flex-col-center-start scheme-square" v-loading="showSchemeLoading" element-loading-text="正在加载方案中" >
    <div class="margin-col-50 square-row">
      <el-input
          style="width: 50%"
          v-model="searchText"
          placeholder="请输入搜索内容"
          :suffix-icon="Search"
      />
    </div>
    <div class="margin-col-20 square-row  padding-col-20 square-select-box" >
      <SchemeFilterForm @change="handleSchemeFilterFormChange"></SchemeFilterForm>
    </div>
    <div class="square-row flex-col-center-start" >
      <PublicSchemeBox @click-card="handleClickCard" :scheme-list="schemeList"></PublicSchemeBox>
    </div>
    <div  class="square-row flex-row-center margin-col-20">
      <el-pagination :page-size="pageConfig.pageSize" background layout="prev, pager, next" :total="schemeList.length" />
    </div>

  </div>

</template>

<script setup lang="ts">
import {ref} from "vue"
import PublicSchemeBox from "@/components/scheme/PublicSchemeBox.vue";
import {Search} from "@element-plus/icons";
import SchemeFilterForm from "@/components/form/SchemeFilterForm.vue";

import {SchemeShowCardType} from "@/components/scheme/SchemeShowCard.vue";
import sysConfig from "@/config/index"
import {getSchemeListPage, getSchemeListPageForPublic} from "@/api/scheme/SchemeApi";
import {SchemeQueryParam, SchemeStatus} from "@/ts/scheme";

let showSchemeLoading=ref(false)
let searchText=ref("")
let schemeList=ref<SchemeShowCardType[]>([])
let pageConfig=ref({
  pageNum:1,
  pageSize:sysConfig.PAGE_SIZE
})

getSchemeList(pageConfig.value.pageNum,{})
// api请求方案
function getSchemeList(pageNum:number,param:SchemeQueryParam){

  showSchemeLoading.value=true
  getSchemeListPageForPublic(pageNum,param).then(resp=>{
    if(resp.code === 200){
      schemeList.value=resp.data.records
    }
  })

    showSchemeLoading.value=false



}


function handleSchemeFilterFormChange(){

}

function handleClickCard(scheme:SchemeShowCardType){
  console.log(scheme)
}
</script>

<style scoped lang="less">
  .scheme-square{
    width: 100%;
    .square-select-box{
      border-radius: 5px;
      border: 2px solid var(--border-color-gray);
    }
    .square-row{
      width: 80%;
    }
  }
</style>